Mockjs 模拟数据

一、Mockjs

1.1 简介

• 生成随机数据，拦截 Ajax 请求
• 前后端分离，让前端攻城师独立于后端进行开发。
• 开发无侵入，不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据。
• 数据类型丰富，支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。
• 增加单元测试的真实性，通过随机数据，模拟各种场景。

1.2 安装

$ npm i mockjs -D

1.3 演示

引入mock.js 和 jquery

<script src="../node_modules/mockjs/dist/mock.js"></script>
<script src="../node_modules/jquery/dist/jquery.min.js"></script>

mockjs 创建模拟 api，拦截 ajax 请求，返回测试的用户数据

Mock.mock('http://api.com', {
    "user|1": [{			// |1  返回一条数据
        'name': '@cname',   //中文名称
        'age|1-100': 100,   //100以内随机整数
        'birthday': '@date("yyyy-MM-dd")',  //日期
        'city': '@city(true)'   //中国城市
    }]
});

发送 ajax 请求

$.ajax({
      url: 'http://api.com',
      type: 'post',
      data: '',
      success: function(data) {
      	console.log(data);
      }
})

打印接口返回的数据

{
    "user": {
        "name": "钱芳",
        "age": 31,
        "birthday": "1976-06-15",
        "city": "山东省 威海市"
    }
}

更为详细的数据模板定义，请参考官方文档。

[mockjs官网]: http://mockjs.com/